<template>
	<view>
		<u-navbar :is-back="false" title="个人中心" :border-bottom="false">
			<view class="u-flex u-row-right" style="width: 100%;"><view class="camera u-flex u-row-center"></view></view>
		</u-navbar>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-m-r-10"><u-avatar :src="userinfo.avatar" size="140"></u-avatar></view>
			<view class="u-flex-1">
				<view class="u-font-16 u-p-b-20">{{ userinfo.nickname }}</view>
				<view v-if="userinfo.user_id" class="u-font-14 u-tips-color">用户id：{{ userinfo.user_id }}</view>
			</view>
			<view v-if="!userinfo.user_id" class="u-m-l-10 u-p-10">
				<u-icon @click="routeToLoginPage" name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>
		<view class="u-m-t-20">
			<u-cell-group><u-cell-item icon="heart" title="关于我们" @click="goToAboutUs"></u-cell-item></u-cell-group>
			<u-cell-group>
				<u-link :href="pc_qq_server_url"><u-cell-item icon="server-man" title="联系客服"></u-cell-item></u-link>
			</u-cell-group>
			<u-cell-group><u-cell-item icon="setting" title="设置" @click="goToEditUs"></u-cell-item></u-cell-group>
		</view>

		<view class="u-m-t-20" v-if="this.userinfo.user_id">
			<u-cell-group><u-cell-item @click="loginOut" :arrow="false" title="退出登录"></u-cell-item></u-cell-group>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			mobile_qq_server_url: 'mqqwpa://im/chat?chat_type=wpa&uin=326891470&version=1&src_type=web&web_src=oicqzone.com',
			pc_qq_server_url: 'tencent://message/?uin=326891470&amp;Site=&amp;Menu=yes',
			userinfo: {
				nickname: '未登录'
			}
		};
	},
	onShow(){
		let userinfo = uni.getStorageSync('userinfo');
		if (userinfo!=='') {
			this.userinfo = JSON.parse(userinfo);
		}
	},
	methods: {
		goToAboutUs(){
			this.$u.route({
				type: 'to',
				url: 'pages/rentalCars/aboutUs/index'
			})
		},
		goToEditUs(){
			if(this.userinfo.user_id === undefined || this.userinfo.user_id === ''){
				this.$u.toast('请先登录');
				return false;
			}
			this.$u.route({
				type: 'to',
				url: 'pages/rentalCars/userInfo/edit'
			})
		},
		routeToLoginPage(){
			this.$u.route({
				type: 'to',
				url: 'pages/template/login/index'
			})
		},
		loginOut(){
			this.$u.api.userLogout();
			uni.removeStorageSync('userinfo')
			uni.removeStorageSync('token')
			this.userinfo = {nickname: '未登录'}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ededed;
}

.camera {
	width: 54px;
	height: 44px;

	&:active {
		background-color: #ededed;
	}
}
.user-box {
	background-color: #fff;
}
</style>
